@charset "utf-8";
/* CSS Document public*/


.layui-inline,img{display:inline-block;vertical-align:middle}


 
 .layui-layout-right{position:absolute!important;right:0;top:0}
 .layui-container{position:relative;margin:0 auto;padding:0 15px;box-sizing:border-box;max-width: 1310px;}


.container04 .content .box .con .title1 h2 a:hover, .list_box1 li a:hover h2{ color:#d4042c; padding-left:1.25rem}
.draw_h{ width: 4.125rem !important; height: 4.125rem !important; line-height: 4rem !important; display:block; border-radius: 50%; text-align: center; position:relative;}
.draw_h:before{ content:""; display:block; width:100%; height:100%; position:absolute; left:0; top:0; border: 1px solid rgba(100%,100%,100%,.5); border-radius: 50%;}
svg.drawcircle{position:absolute;top:0;left:0;overflow: inherit;display: block;pointer-events: none;}
svg.drawcircle circle {
	fill: none; box-sizing:border-box;
	stroke-width: 2;
	stroke: none;
	stroke-dasharray: 0 , 188.49;
	stroke-dashoffset:188.49;
	transition: all .3s linear 0s;	
}
.draw_h .icon { fill: #626262; vertical-align: middle; transition:.3s;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}



.m{ max-width: 1310px;}

.banner_wave{ position: absolute; left: 0; bottom: 0; width: 100%; pointer-events: none; height: 303px; background: url(../images/banner_wave.png) center top no-repeat; z-index: 9;}
#banner .swiper-container { height:53rem;  }
#banner .swiper-slide { overflow: hidden;}
#banner .slide-inner { position: absolute;  width: 100%; height: 100%;left: 0; top: 0; background-size: cover; background-position: center; background-repeat: no-repeat !important;}
#banner .m.between{ justify-content: space-between; display: flex; align-items: center;}
#banner .txt{ flex-shrink: 0;}

#banner .txt01{ color: #fff; height: 100%; display: flex; align-items: center; flex-direction: column; justify-content: center; text-align: center;  padding-bottom:4rem;}
#banner .txt01 h4{ font-size: 3rem; color: #fff; font-weight: bold; margin-bottom: 1rem; }
#banner .txt01 h3{ font-size: 1.375rem; color: #fff; line-height: 2.5rem; margin-top: 1rem; margin-bottom: 1.5rem;  }
#banner .txt01 p{ font-size: 1.125rem; line-height: 1.375rem; color: rgba(255, 255, 255, 1); text-transform: uppercase; display: block; font-family: ROBOTO-REGULAR;}

#banner .txt02{ color: #fff; height: 100%; display: flex; align-items: flex-start; flex-direction: column; justify-content: center; text-align: left;  padding-bottom:3rem;}
#banner .txt02 h4{ font-size: 3rem; color: #fff; font-weight: bold; margin-bottom: 1rem; position: relative; }
#banner .txt02 h3{ font-size: 1.375rem; color: #fff; line-height: 2.5rem; margin-top: 1rem; margin-bottom: 1.5rem;  }
#banner .txt02 p{ font-size: 1.375rem; line-height: 1.375rem; color: #ee0632; text-transform: uppercase; display: block; font-family: ROBOTO-REGULAR;}
#banner .txt02 h4:before{ content: ""; display: block; position: absolute; left: -2.25rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; border-radius: 50%; box-sizing:border-box; border: 2px solid #e90632;}

#banner .txt03{ color: #fff; height: 100%; display: flex; align-items: flex-start; flex-direction: column; justify-content: center; text-align: left;  padding-bottom:3rem;}
#banner .txt03 h4{ font-size: 3rem; color: #fff; font-weight: bold; margin-bottom: 1rem; position: relative; }
#banner .txt03 h3{ font-size: 1.375rem; color: #fff; line-height: 2.5rem; margin-top: 1rem; margin-bottom: 1.5rem;  }
#banner .txt03 p{ font-size: 1.125rem; line-height: 1.375rem; color: #fff; text-transform: uppercase; display: block; font-family: ROBOTO-REGULAR;}
#banner .txt03 h4:before{ content: ""; display: block; position: absolute; box-sizing:border-box; left: -2.25rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid #e90632;}

#banner .swiper-button-prev{ position:absolute; background:url(../images/banner_left.png) center no-repeat !important; background-size:1.5rem !important; opacity:.8; left:4%;}
#banner .swiper-button-next{  position:absolute; background:url(../images/banner_right.png) center no-repeat !important; background-size:1.5rem !important; opacity:.8; right:4%;}
#banner .pic{ margin-bottom: 4rem; min-width:60%; height: calc(100% - 4rem); display: flex; justify-content: center; align-items: center;}
#banner .pic img{ max-height: 70%;}
#banner .txtanim01{ opacity: 0;}
#banner .txtanim02{ opacity: 0;}
#banner .txtanim03{ opacity: 0;}
#banner .swiper-slide.swiper-slide-active .txtanim01{ animation: enter 1.2s forwards .2s;}
#banner .swiper-slide.swiper-slide-active .txtanim02{ animation: enter 1.2s forwards .3s;}
#banner .swiper-slide.swiper-slide-active .txtanim03{ animation: enter 1.2s forwards .4s;}

.colorfont{ color: #ee0632; font-size: 3.125rem; font-family: DINCond-Medium; margin: 0 3px 0 3px; position: relative; bottom: -3px;}

.dotbox{ position: absolute; left: 0; bottom: 8rem; width: 100%; height: 20px; z-index: 111;}
.swiper-pagination{ width: 100%;}
.dotbox .dots{ width: 1.25rem !important; height: 1.25rem !important; display: inline-block; background: none; opacity: 1; margin-right: 7px; }
.dotbox .dots:before{ border: 0; background: #fff; transform: scale(.4);}
.dotbox .dots svg.drawcircle circle {
	fill: none; box-sizing:border-box;
	stroke-width: 1.5;    
	stroke-dasharray: 0 , 62.8;
	stroke-dashoffset:62.8;
}
.dots.swiper-pagination-bullet-active svg.drawcircle circle { 
    animation: svgrotate 6.2s forwards;
}





@-webkit-keyframes svgrotate {
    0% { stroke:rgba(255, 255, 255, 1);
        stroke-dasharray: 0 , 62.8;
        stroke-dashoffset:62.8;}
    100% { stroke:rgba(255, 255, 255, 1);
        stroke-dasharray:62.8 , 0;
        stroke-dashoffset:62.8; }
 }
@keyframes enter {
 }
 
@-webkit-keyframes enter {
    0% { opacity: 0; transform:translateY(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); }
    20% { opacity: 0; transform:translateY(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); }
    100% { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); }
}
@keyframes enter {
    0% { opacity: 0; transform:translateY(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); }
    20% { opacity: 0; transform:translateY(100px); -webkit-transform:translateY(100px); -moz-transform:translateY(100px); -ms-transform:translateY(100px); -o-transform:translateY(100px); }
    100% { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); }
}
 
.m{ height:100%;}